<template>
  <view>
    <view class="top_login">
      <h3 class="h1">登录</h3>
      <navigator class="outu" target="" hover-class="" delta="1" open-type="navigateBack">
        <uni-icons type="back" class="" style="margin-top: -10rpx;" color="white" size="25"></uni-icons>
      </navigator>

    </view>
    <view class="tests">宏烨找房</view>
    <image class="lign_img" src="http://10.31.71.52:7002/public/static/login.png" mode="scaleToFill" />
    <input class="uni-input" v-model="data.phones" focus placeholder="输入账号/手机号/昵称" />
    <button class="login_btn"  @click="throttle()">注册并登录</button>
    <view class="login_qita">
      ————其他快捷方式————
    </view>
    <view class="login_div" @click="throttles()">
      <view class="login_ph">
        <image class="login_phone" src="http://10.31.71.52:7002/public/static/phone.png" mode="scaleToFill" />
      </view>
      <text class="login_text">使用手机号188****9338一键登录登录</text>
    </view>
    <view class="login_btns"><text>登录注册视为你同意《服务条款》，《和宏烨找房用户协议》</text></view>

  </view>
</template>
<script setup>
import '../../utils/http'
import { reactive } from 'vue'
import ttle from '../../utils/deouce'
const data = reactive({
  phones:''
})
console.log(ttle);
//获取顶部距离
// const onlogin = async () => {
//      await uni.login({
//   provider: 'weixin',
//   success: function (loginRes) {
//     console.log(loginRes.authResult);
//     // 获取用户信息
//     uni.getUserInfo({
//       provider: 'weixin',
//       success: function (infoRes) {
//         console.log('用户昵称为：' + infoRes.userInfo.nickName);
//       }
//     });
//   }
// });
// }
// 微信授权登录

const getUserInfo = ()=>{
  if(/^[1][3-9][0-9]{9}$/.test(data.phones)){
  onGetphone(data.phones)
  }else{
    uni.$showMeg('手机号不正确')
  }// 正则表达式
  
}
// 利用前置防抖解决用户暴力点击
let throttle = ttle(getUserInfo)
// 测试接口
const onGetphone = (hpme) => {
  console.log(hpme);
  uni.request({
    method: 'POST',
    url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/login/wxMin/simple',
    data: {
      phoneNumber: hpme?hpme:'18838929338'
    }
  }).then((result) => {
    if (result.statusCode == '200') {

      setTimeout(() => {
        console.log(result.data.result);
        uni.setStorageSync('user', JSON.stringify(result.data.result))
        uni.setStorageSync('token', JSON.stringify(result.data.result.token))
        uni.$showMeg('登陆成功')

        setTimeout(() => {
          uni.switchTab({ url: '/pages/my/my' })
        }, 500);
      }, 1000);
    }
  }).catch((err) => {

  });
}
// 
let throttles = ttle(onGetphone)

</script>

<style lang="scss" scoped>
$bga: #208CFF;

.top_login {
  height: 13vh;
  background: $bga;

  .h1 {
    line-height: 14vh;
    color: white;
    text-align: center;
  }
}

.lign_img {
  position: relative;
  top: 7vh;
  left: 50%;
  transform: translate(-50%);
}

.login_btn {
  border-radius: 50px;
  background: $bga;
  color: white;
  width: 80%;
  margin-top: 5vh;
}

.login_qita {
  width: 100vw;
  text-align: center;
  line-height: 8vh;
  color: grey;
  font-size: 12px;
}

.outu {
  position: fixed;
  // background: red;
  top: 6vh;
}

.tests {
  height: 12vh;
  width: 100vw;
  position: absolute;
  z-index: 999;
  font-size: 30px;
  text-align: center;
  color: $bga;
  font-weight: 900;
  line-height: 100px;
}

.login_div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .login_ph {
    width: 100rpx;
    height: 100rpx;

    .login_phone {
      width: 100%;
      height: 100%;
      border: 3px solid #CECECE;
      border-radius: 50%;

    }

  }

  .login_text {
    color: grey;
    // text-align: center;
    margin-top: 2vh;

  }

}

.login_btns {
  font-size: 12px;
  color: grey;
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 80vw;
  transform: translate(-50%);
  // padding-top: ;
}
.uni-input{
  width:80%;
  border: grey solid 2rpx;
  height: 70rpx;
  margin: 50rpx auto 0 ;
  border-radius: 50rpx;
  padding-left: 10rpx;
}
</style>